import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Carousel, WhiteSpace } from "weaver-mobile";
import "../index.less";

@withRouter
export default class MeetingDetail3 extends Component {
  state = {
    images: ["/images/detail3.png"],
    title: "投资创建财富 成长提升价值 | 中田集团2021年全国股东大会",
    startDate: "2021年04月27日",
    startTime: "10:30",
    endDate: "2021年04月27日",
    endTime: "11:30",
    duration: "1小时",
    status: "已开始",
    introduction:
      "<strong>八载淬砺，蒸蒸日上，连接四海跨河岳。峥嵘岁月，敢为人先，赓续赞歌佑中田。</strong><br/>2021年春天，<strong>中田集团全国股东会议</strong>在浙江海盐隆重召开。来自全国各地的股东汇集于此，聚焦中国经济热点话题、创业就业新问题，共话集团未来发展新思路。",
  };
  componentDidMount() {
    document.title = "会议详情";
  }

  render() {
    return (
      <div className="meeting-detail">
        {/* <div>
          <NavBar
            className="nav-bar"
            icon={<Icon type="left" />}
            leftContent="返回"
            onLeftClick={() => console.log("onLeftClick")}
          >
            会议详情
          </NavBar>
        </div> */}
        <div className="page">
          <Carousel autoplay={false} infinite>
            {this.state.images.map((image) => {
              return (
                <img
                  key={image}
                  src={`${image}`}
                  alt=""
                  style={{ width: "100%", verticalAlign: "top" }}
                />
              );
            })}
          </Carousel>
          <WhiteSpace size="lg" />
          <div className="main">
            <div className="title">{this.state.title}</div>
            <div className="m-time">
              <div className="start">
                <div className="time">{this.state.startTime}</div>
                <div className="date">{this.state.endDate}</div>
              </div>
              <div className="center">
                <div className="status">{this.state.status}</div>
                <div className="duration">
                  <div className="text">{this.state.duration}</div>
                </div>
                <div className="time-zone">(GMT+08:00)</div>
              </div>
              <div className="end">
                <div className="time">{this.state.endTime}</div>
                <div className="date">{this.state.endDate}</div>
              </div>
            </div>
          </div>
          <WhiteSpace size="lg" />
          <div className="introduction">
            <div className="title">会议简介:</div>
            <div
              className="content"
              dangerouslySetInnerHTML={{ __html: this.state.introduction }}
            ></div>
          </div>
        </div>
        <div className="footer">
          <div className="btn">查看直播</div>
        </div>
      </div>
    );
  }
}
